<template>
	<view class="">
	<view style=" display: flex;justify-content: center;
		background-color: #CFEAF1;height: 44px;width: 100%;
		align-items: center;position: sticky;top: 0;z-index: 1;">
			<image @click="tologin()" src="../../static/back.png" style="height: 30px;width: 30px;
		position: absolute;left: 10px;"></image>
			<h3>找回密码</h3>
		</view>
	<view>
		<uni-forms ref="form" :rules="{}" style="display: flex;justify-content: center;align-items: center;">
			<uni-forms-item label="" name="" >
				<uni-easyinput  v-model="phone" placeholder="请输入您的手机号码" 
				               style="width: 80vw;margin-top: 100px;
							   text-align:center;"/>
			</uni-forms-item>
			<uni-forms-item label="" name="" >
				<view style="display: flex;height: 40px;line-height: 40px;">
					<uni-easyinput  v-model="yzm" placeholder="请输入获取的验证码" 
				               style="width: 50vw;text-align:center;"/>
				<button v-show="ss" type="warn" style="width: 25vw;font-size: 5px;
				 height: 35px;line-height: 35px;" @click="forget">获取验证码</button>
				 
				 <button v-show="!ss" type="warn" style="width: 25vw;font-size: 5px;
				  height: 35px;line-height: 35px;" @click="forget">{{code}}</button>
				</view>
			</uni-forms-item>
			<uni-forms-item label="" name="">
				<button type="primary" @click="sure">确认</button>
			</uni-forms-item>
			<uni-section title="您的用户名和密码是" type="line" v-show="!yzcg" style="background: transparent;margin-top: 50px;">
				<uni-forms-item class="text" label="用户名" name="">
					<text >{{users.username}}</text>
				<!-- <uni-easyinput disabled v-model="users.username" placeholder="请验证" /> -->
			</uni-forms-item>
			<uni-forms-item class="text" label="密码" name="">
				<text>{{users.password}}</text>
				<!-- <uni-easyinput disabled v-model="users.password" placeholder="请验证" /> -->
			</uni-forms-item>
			</uni-section>
			
		</uni-forms>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				yzm:'',
				code:'',
				users:{},
				ss:true,
				yzcg:true
			}
		},
		methods: {
			tologin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			forget(){
				uni.request({
					url: 'http://localhost:8484/ttwm/ttwm/forgetUser',
					method: 'POST',
					data: {},
					success: res => {
						if(res.data.success){
							this.code=res.data.forget
							this.ss=false
							this.yzm=''
							uni.showToast({
								title: '获取成功',
								icon: 'none'
							});
						}else{
							uni.showToast({
								title: '获取失败',
								icon: 'none'
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			sure(){
				if(!this.phone){
					uni.showToast({
						title: '电话号码不能为空',
						icon: 'none'
					});
				}else if(!this.yzm){
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					});
				}else if(this.yzm != this.code){
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					});
				}else{
					uni.request({
						url: 'http://localhost:8484/ttwm/ttwm/phoneUser',
						method: 'POST',
						data: {'phone':this.phone},
						success: res => {
							if(res.data.success){
								this.users = res.data.data
								this.yzcg=false
								uni.showToast({
									title: '验证通过',
									icon: 'none'
								});
							}else{
								this.yzcg=true
								uni.showToast({
									title: '该手机号码未注册',
									icon: 'none'
								});
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
		// onLoad() {
			
		// }
	}
</script>

<style>
/* /deep/.is-disabled{
	color: #000;
	font-weight: bold;

} */
.text{
	display: flex;
	align-items: center;
	font-weight: bold;
	
}
</style>
